    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>太阳系案例</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            body{
                background-color: #000000;
                overflow: hidden;
            }
            .sun{
                width: 120px;
                height: 120px;
                position: absolute;
                border-radius: 50%;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                background-color: gold;
                box-shadow: 0 0 33px 13px gold;
            }
            .earth{
                width: 300px;
                height: 300px;
                border-radius: 50%;
                /*border-color: #FFFFFF*/
                border: 1px solid #FFFFFF;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                animation: obit 5s linear infinite;
            }
            .earth::before{
                content: "松";
                text-align: center;
                line-height: 50px;
                font-size: 20px;
                position: absolute;
                left: 0;
                top: 50%;
                transform: translate(-50%,-50%);
                width: 50px;
                height:50px;
                border-radius: 50%;
                background-color: blue;
            }
            .moon{
                position: absolute;
                left: 0;
                top: 50%;
                transform: translate(-50%,-50%);
                height: 85px;
                width: 85px;
                border-radius: 50%;

                /*background-color: #cccccc;*/
                border: 1px solid #cccccc;
                animation: obit 8s linear infinite;
            }
            .moon::before{
                content: "";
                position: absolute;
                left: 0;
                top: 50%;
                transform: translate(-50%,-50%);
                width: 25px;
                height:25px;
                border-radius: 50%;
                background-color: #cccccc;

            }
            .mars{
                width: 520px;
                height: 520px;
                border-radius: 50%;
                /*border-color: #FFFFFF*/
                border: 1px solid #FFFFFF;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                animation: obit 10s linear infinite;
            }
            .mars::before {
                content: "劲";
                text-align: center;
                line-height: 80px;
                font-size: 40px;
                position: absolute;
                left: 0;
                top: 50%;
                transform: translate(-50%, -50%);
                width: 80px;
                height: 80px;
                border-radius: 50%;
                background-color: #ff7330;
            }
            .venus{
                width: 750px;
                height: 750px;
                border-radius: 50%;
                /*border-color: #FFFFFF*/
                border: 1px solid #FFFFFF;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                animation: obit 15s linear infinite;
            }
            .venus::before {
                content: "吴";
                text-align: center;
                line-height: 100px;
                font-size: 60px;
                position: absolute;
                left: 0;
                top: 50%;
                transform: translate(-50%, -50%);
                width: 100px;
                height: 100px;
                border-radius: 50%;
                background-color: #21ffe2;
            }
            @keyframes obit {
                0%{
                    transform: translate(-50%,-50%) rotate(0deg);
                }
                100%{
                    transform: translate(-50%,-50%)  rotate(360deg);
                }

            }
        </style>
    </head>
    <body>
        <div class="sun"></div>
        <div class="earth">
            <div class="moon"></div>
        </div>
        <div class="mars"></div>
        <div class="venus"></div>
    </body>
    </html>